<template>
	<view class="wapx">
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">课时详情</text>
			</view>
		</view>
		<view class="keshixinxi">
			<view class="tiao"></view>
			<text class="xinxi">课时信息</text>
		</view>
		
		<view class="studentxinxi">
			<view class="head">
				<image src="../../../../static/teacherimg/headimg.png" mode="" class="touimg"></image>
				<text class="studentname">范冰冰</text>
			</view>
			
			<view class="coursename">
				<view class="kecheng">课程</view>
				<text class="kechengname">基础钢琴课</text>
			</view>
			
			<view class="keshi">
				总课时: 72课时
			</view>
			
			<view class="yishangkeshi">
				<text class="shang">本月已上课时: 48课时</text>
				<text class="sheng">剩余课时：30课时</text>
			</view>
			
			<view class="didian">
				地点 | 舜泽琴行
			</view>
		</view>
		
		<calendar
		:lunar="false"
		:disable-before="true"
		:start-date="'2019-3-2'"
		:end-date="'2030-5-20'"
		@change="change"
		@to-click="toClick"
		>
		<view class="tiao"></view>
		</calendar>
		
		
		
		
	</view>
	
</template>

<script>
	import calendar from '@/components/zzx-calendar/zzx-calendar.vue';
	export default {
		
		data() {
			return {
				
			}
		},
		
		methods: {
			        //to-click 事件和 change 事件，返回的数据都是一样的，所以两个事件只会一个生效。
			        //不同的地方在于，to-click 只有点击生效，而 change 是只要日期有变化就生效，这个变化不一定是点击。
			        //日历切换事件
			        change(e) {            
			            console.log(e);
			        },
			        //日历选择事件
			        toClick(e) {            
			            console.log(e);
			        },
					
					fanhui(){
						this.$router.push('mykeshi')
					},
			  },
			
		components:{
		    calendar,
		},
	}
</script>

<style scoped>
	.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	.keshixinxi{
		width: 690rpx;
		height: 32rpx;
		margin: auto;
		margin-top: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.tiao{
		width: 5rpx;
		height: 19rpx;
		border-radius: 2.5rpx;
		background:#8DCE2A;
	}
	.xinxi{
		font-size: 32rpx;
		color: #333333;
		line-height:32rpx;
		margin-left:16rpx;
	}
	
	.studentxinxi{
		width: 690rpx;
		height: 354rpx;
		border-radius: 10rpx;
		margin: auto;
		margin-top: 40rpx;
		margin-bottom: 50rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.16);
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		align-items: center;
	}
	.head,.coursename,.keshi,.yishangkeshi,.didian{
		width: 100%;
		height: 70rpx;
		padding-left:30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.touimg{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.studentname{
		font-size: 28rpx;
		color: #333333;
	}
	
	.coursename{
		height: 30rpx;
	}
	.kecheng{
		width: auto;
		height: 100%;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-radius:6rpx;
		background: #8DCE2A;
		color: #FFFFFF;
		font-size: 24rpx;
		margin-right: 20rpx;
	}
	.kechengname{
		width: auto;
		height: 100%;
		color: #333333;
		font-size: 28rpx;
		line-height: 30rpx;
		font-weight: bold;
	}
	
	.keshi{
		height: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
	.yishangkeshi{
		height: 30rpx;
		color: #333333;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.shang,.sheng{
		width: auto;
		height:100%;
		font-weight: bold;
	}
	
	.didian{
	   height: 30rpx;
	   color: #777777;
	   font-size: 24rpx;
	}
	
	
	/deep/ .zzx-calendar .calendar-heander{
		text-align: left;
		box-sizing: border-box;
		padding-left:30rpx;
	}
	
</style>
